<template>
	<view>
		<u-navbar title-color="#ffffff" back-icon-color="#000000" :border-bottom="false" :is-fixed="true" :is-back="true" :background="background">
			<view class="flex align-center justify-start">		
				<view>
					<text class="font-weight-bold font-md">小萌</text>
				</view>
			</view>
		</u-navbar>
		<scroll-view scroll-y="true" :style="'height:'+scrollH+'rpx;'" :scroll-into-view="scrollInto" scroll-with-animation>
			<view class="flex flex-column mx-2">
				<block v-for="(item,index) in chats" :key="index">
					<w-im-chat :chat="item" :index="index" :pretime="index > 0 ? chats[index-1].create_time : 0"></w-im-chat>
				</block>
			</view>
		</scroll-view>
		<view class="py-2">
			<w-im-send></w-im-send>
		</view>
	</view>
</template>

<script>
	import wImChat from '@/components/wboot/w-im-chat.vue';
	import wImSend from '@/components/wboot/w-im-send.vue';
	import chatList from '@/common/data/chat_list.js';
	export default {
		components:{
			wImChat,
			wImSend
		},
		data() {
			return {
				scrollInto:"",
				scrollH: 500,
				chats:chatList.data,
				background: {
					background: '#ffffff'
				},
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					console.log(res.windowHeight)
					this.scrollH = (res.windowHeight-150)*2
				}
			})
		},
		// 页面加载完成的时候
		onReady() {
			this.pageToBottom()
		},
		methods: {
            // 发送
			submit(data){
				let obj = {
					user_id:1,
					avatar:"/static/default.jpg",
					username:"昵称",
					type:"text", 
					data:data,
					create_time:(new Date()).getTime()
				}
				this.chats.push(obj)
				// 滚动到底部
				this.pageToBottom()
				
			},
			// 滚动到底部
			pageToBottom(){
				let lastIndex = this.chats.length -1;
				if (lastIndex < 0) return;
				this.scrollInto = 'chat'+lastIndex
			}
		}
	}
</script>

<style>

</style>
